<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="4" style="width: 100px; height: 100px">
        <el-image fit="contain" v-if="software.app === 1" :src="require('@/assets/images/collect/mobile.png')"></el-image>
        <el-image fit="contain" v-else-if="software.app === 2" :src="require('@/assets/images/collect/Applet.png')"></el-image>
        <el-image fit="contain" v-else-if="software.app === 3" :src="require('@/assets/images/collect/windows.png')"></el-image>
        <el-image fit="contain" v-else-if="software.app === 4" :src="require('@/assets/images/collect/Apple.png')"></el-image>
        <el-image fit="contain" v-else-if="software.app === 5" :src="require('@/assets/images/collect/linux.png')"></el-image>
        <el-image fit="contain" v-else :src="require('@/assets/images/collect/os.png')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions title="" :column="2" :size="size">
          <el-descriptions-item label="软件名称">{{software.name}}</el-descriptions-item>
          <el-descriptions-item label="软件类型">
            <el-tag :size="tagSize">{{software.softwareTypeName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="是否使用">
            <div v-if="software.inUse === 2">
              <el-tag :size="tagSize" type="success">使用中</el-tag>
            </div>
            <div v-else>
              <el-tag :size="tagSize" type="info">未使用</el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="推荐指数">
            <el-rate disabled v-model="software.grade"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="运行平台">{{appToChinese(software.app)}}</el-descriptions-item>

          <el-descriptions-item label="本地保存地址">{{software.localSaveAddress}}</el-descriptions-item>

          <el-descriptions-item label="官网下载地址">
            <el-link :href="software.officialAddress" target="_blank" type="primary"> {{software.officialAddress}}</el-link>
          </el-descriptions-item>

        </el-descriptions>
      </el-col>
    </el-row>


    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              描述
            </template>
            {{software.describe}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>


    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              备注
            </template>
            {{software.remarks}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  export default {
    name: "SoftwareDetailed",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 软件信息
        software: {
          name: null,
          app: null,
          inUse: null,
          softwareTypeName: null,
          typeId: null,
          localSaveAddress: null,
          officialAddress: null,
          grade: null,
          describe: null,
          remarks: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 运行平台转中文
       * @param item 要转换的数据
       * @return {string}
       */
      appToChinese(item){
        this.$emit('appToChinese', item)
      },
      /**
       * 打开软件详情
       * @param obj 软件信息
       */
      openSoftwareDetailed(obj){
        this.software = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的软件', '详情'])
      },

    }
  }
</script>

<style scoped>

</style>
